<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<script type="text/javascript" src="../js/checkUserInfo.js"></script>
<script type="text/javascript" src="../js/CheckUsername.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Register</title>

</head>
<body>
<div th:replace="common/top"></div>

<div id="Content">

    <div id="BackLink">
        <a href="/catalog/view">Back</a>
    </div>

    <div id="Catalog">


        <span th:if="${session.registerMsg != null }">
            <p th:text="${session.registerMsg}" class="error-msg"></p>
        </span>

        <form action="/account/register" method="post">
            <h3>User Information</h3>

            <table class="rwd-table">
                <tr>
                    <td>User ID:</td>
                    <td>
                        <input type="text" name="username" id="username" th:value="${session.account?.username}" onblur="isUsernameExist();">
                        <div id="isExistInfo"></div>
                    </td>

                </tr>
                <tr>
                    <td>New password:</td>
                    <td><input type="password" name="password"/></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="password" name="repeatedPassword"/></td>
                </tr>
            </table>

            <h3>Account Information</h3>

            <table class="rwd-table">
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstName" th:value="${session.account?.firstName}"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastName" th:value="${session.account?.lastName}"/></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" size="40" name="email" th:value="${session.account?.email}"/></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" th:value="${session.account?.phone}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="address1" size="40" th:value="${session.account?.address1}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="address2" size="40" th:value="${session.account?.address2}"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" th:value="${session.account?.city}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="state" th:value="${session.account?.state}"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" name="zip" th:value="${session.account?.zip}"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="country" th:value="${session.account?.country}"/></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table class="rwd-table">
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference">
                            <option value="japanese"
                                    th:selected="${session.account?.languagePreference eq 'japanese'}"
                            >japanese
                            </option>
                            <option value="english"
                                    th:selected="${session.account?.languagePreference eq 'english'}"
                            >english
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td>
                        <select name="favouriteCategoryId">
                            <option value="BIRDS"
                                    th:selected="${session.account?.favouriteCategoryId eq 'BIRDS'}"
                            >BIRDS
                            </option>
                            <option value="DOGS"
                                    th:selected="${session.account?.favouriteCategoryId eq 'DOGS'}"
                            >DOGS
                            </option>
                            <option value="CATS"
                                    th:selected="${session.account?.favouriteCategoryId eq 'CATS'}"
                            >CATS
                            </option>
                            <option value="FISH"
                                    th:selected="${session.account?.favouriteCategoryId eq 'FISH'}"
                            >FISH
                            </option>
                            <option value="REPTILES"
                                    th:selected="${session.account?.favouriteCategoryId eq 'REPTILES'}"
                            >REPTILES
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td>
                        <input type="checkbox" name="listOption" value="true"
                               th:checked="${session.account?.listOption}"
                        >
                    </td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td>
                        <input type="checkbox" name="bannerOption" value="true"
                               th:checked="${session.account?.bannerOption}"
                        >
                    </td>
                </tr>

            </table>

            <p align="center"><font color="red" name="errormsg"></font></p>

            <input onclick=" return check()" type="submit" name="register" value="Register" class="dissociated-btn"/>


        </form>
    </div>
</div>

<div th:replace="common/bottom"></div>
</body>
</html>